<template>
	<view class="container">
		<map id="myMap" class="map" :latitude="centerLat" :polyline="polyline" :longitude="centerLng" :markers="markers"
			show-location :zoom="zoom"></map>
		<view class="sliderpanel">
			<view class="contents">
				<view class="part_one">
					<view class="one_box" @click="bindtake(1)">
						<view class="box_dian">
							<image src="../../static/image/icon_f.png"></image>
						</view>
						<view class="box_addres" v-if="Object.keys(this.take).length>0">
							<view class="add">{{take.address}}{{take.addressDetail}}</view>
							<view class="num">
								<view class="name">{{take.userName}}</view>
								<view class="number">{{take.userPhone}}</view>
							</view>
						</view>
						<view class="box_addres1 text-df text-right" v-else>请填写发货地址</view>
						<view class="box_image">
							<u-icon name="arrow-right" class="icon_you"></u-icon>
						</view>
					</view>

					<view class="box_jh margin-tb-sm">
						<image src="../../static/image/icon_qh.png"></image>
					</view>

					<view class="one_box" @click="bindtake(2)" style="padding-bottom: 10rpx;">
						<view class="box_dian">
							<image src="../../static/image/icon_s.png"></image>
						</view>
						<view class="box_addres" v-if="Object.keys(close).length>0">
							<view class="add">
								{{close.address}}{{close.addressDetail}}
							</view>
							<view class="num">
								<view class="name">{{close.userName}}</view>
								<view class="number">{{close.userPhone}}</view>
							</view>
						</view>
						<view class="box_addres1 text-df text-right" v-else>请填写收货地址</view>
						<view class="box_image">
							<u-icon name="arrow-right" class="icon_you"></u-icon>
						</view>
					</view>
					<view style="text-align:right;padding: 10upx;margin-right: 32upx;font-size: 24upx;" v-if="distance">
						预估配送距离：
						<text v-if="distance>1000">{{parseFloat(distance/1000).toFixed(1)}}km,预估价格：{{price}}元</text>
						<text v-else>{{distance}}m,预估价格：{{price}}元</text>
					</view>
				</view>
				<form action="">
					<view class="cu-form-group margin-top">
						<view class="title">服务类型</view>
						<picker @change="PickerChange" :value="typeIndex" :range="picker">
							<view class="picker">
								{{typeIndex>-1?picker[typeIndex]:'请选择服务类型'}}
							</view>
						</picker>
					</view>
				</form>


				<view class="part_one" style="margin-top: 20rpx;">
					<view class="pay_name">请填写信息</view>
					<view class="pay_set" style="margin-top: 10upx;">
						<u-input v-model="typeItem" type="textarea" :maxlength="100" placeholder='请填写物品信息,配送要求等' />
					</view>
				</view>
				<view class="part_three">
					<u-form :model="form" ref="uForm" label-position="left" :label-style="labelstyle">
						<u-form-item label="红包" right-icon="arrow-right">
							<u-input @click="openhongbao" v-model="form.hongbao" :disabled="true" :clearable="clearable"
								input-align="right" placeholder="请选择红包" />
						</u-form-item>
					</u-form>
				</view>

			</view>
		</view>


		<u-popup v-model="showpay" mode="bottom" close-icon="close-circle" close-icon-pos="top-right"
			close-icon-color="#8f9298" close-icon-size="50">
			<view class="popup_pay">
				<view class="bg margin-top padding-lr radius">
					<view style="padding: 0 20upx;margin-top: 36rpx;">
						<view
							style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
							v-for="(item,index) in openLists" :key='index'>
							<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
							</image>
							<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
								{{item.text}}
							</view>
							<radio-group name="openWay" style="margin-left: 45rpx;" @tap='selectWay(item)'>
								<label class="tui-radio">
									<radio color="#FF7F00" :checked="openWay === item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="pay_btns" @click="wxPayJsApiLogisticsOrder()">确认支付</view>
			</view>
		</u-popup>


		<!-- 红包弹框  closeable="true" -->
		<u-popup v-model="showmoney" :custom-style="customStyle" mode="bottom" :maskCloseAble="false">
			<view class="popup_money" style="position: relative;">
				<view style="position: absolute;top: 30upx;left: 680upx;z-index: 99999;" @click="closemoney(1)">
					<u-icon name="close-circle" size="48"></u-icon>
				</view>
				<view class="data_title">红包</view>
				<view class="data_select" style="background-color: #F2EDED;">
					<view class="money_box" v-for="(item,index) in hongbao" :key="index"
						v-if="Number(item.redPacketType)==0||Number(item.redPacketType)==indentType">
						<view class="box_tit">
							<view class="money_name">{{item.redPacketTitle}}</view>
							<view class="money_price">￥{{item.redPacketAmount}}</view>
						</view>
						<view class="money_data">有效期至{{item.expirationTime}}</view>
						<view class="money_line" style="margin: 10rpx 0;">
							<u-line direction="row" color="#E6E6E6" border-style="dashed" />
						</view>
						<view class="box_bottom">
							<view class="money_use">满{{item.minimumAmount}}元可使用</view>
							<view class="money_btn">
								<view class="lj_use" @click="bindhongindex(item.redPacketId,item.redPacketAmount)">
									立即使用
								</view>
							</view>
						</view>
					</view>
					<!-- 暂无红包 -->
					<view class="image_box" v-if="hongbao.length==0">
						<image src="../../static/image/emety.png" style="width:100%;height: 350rpx;"></image>
						<view style="width: 100%;text-align: center;color: #ccc;">暂无红包</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <view class="xiadan_box_bottom flex padding">
			<button class="cu-btn bg-orange lg" style="width: 80%;" @tap="placeOrder()">下单</button>
		</view> -->
		<view class="tabbar">
			<view class="paytut">
				<view>
					<view class="tabbarprice">
						<text v-if="totalprice == ''">￥{{price || 0}}</text>
						<text v-else>￥{{totalprice}}</text>
					</view>
					<view class="text-sm" style="margin-left: 35upx;color: #999;" @click="moneylist(showmoneylist)">
						费用明细
					</view>
				</view>
				<view class="tabbarbtn">
					<view class="buts" @click="placeOrder()">去下单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		generateSignatureGet
	} from '@/utils/signature.js';
	import configData from '@/common/config.js'
	export default {

		data() {
			return {
				customStyle: {
					background: '#F2EDED'
				},
				typeIndex: 1,
				centerLat: 0, // 初始纬度（可设为当前位置）
				centerLng: 0, // 初始经度
				markers: [], // 动态标记点
				TabCur: 0,

				labelstyle: {
					whiteSpace: 'nowrap',
					fontWeight: 'bold',
					textIndent: '20rpx'
				},
				distance: 0,
				take: {},
				close: {},
				addressId: undefined,
				addressType: undefined,
				zoom: 14,
				polyline: [],
				mapKey: configData.MapKey,
				// 完整路线点数组
				routePoints: [],
				// 路线总距离
				totalDistance: 0,
				// 路线总时间
				totalTime: 0,
				mapContext: null,
				orders: {},
				payList: {},
				minPoint: {}, //距离发货地最近的快递柜位置
				pointList: [],

				picker: ['上门取件', '存快递柜'],
				showpay: false, //选择支付类型
				openWay: 1,
				openLists: [],
				typeItem: '', //订单信息
				price: 0,
				totalprice: '',
				showmoney: false, //红包弹窗
				hongbao: '',
				form: {
					hongbao: '',
				},
				redPacketId: '', //红包Id
				num: 1,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.openLists = [{
					image: '../../static/image/icon_weixin.png',
					text: '微信',
					id: 1
				},
				{
					image: '../../static/image/jinbi.png',
					text: '余额',
					id: 2
				},
			];
			// #endif
			this.getUserLocation(); // 获取用户初始位置
		},
		
		watch:{
			showpay(newVal, oldVal) {
				if(this.num == 2 && this.showpay == false){
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/order/pay/pay?indentNumber=' + this.orders
								.orderNumber +
								'&id=' + this.orders.id + '&type=1'
						})
					}, 1000)
				}
			},
		},
		
		
		
		onShow() {
			this.addressId = uni.getStorageSync('addressId')
			this.addressType = uni.getStorageSync('addressType')
			if (this.addressId) {
				this.getAddress(this.addressId)
				uni.removeStorageSync('addressType')
				uni.removeStorageSync('addressId')
			}
			this.showpay = false
			this.redPacketId = '' //红包Id
		},
		methods: {
			// 根据订单信息判断用户可用红包
			openhongbao() {
				if (Object.keys(this.take).length == 0) {
					uni.showToast({
						title: '请输入发货地址',
						icon: 'none'
					});
					return
				} else {
					if (!this.take.userName) {
						uni.showToast({
							title: '请输入发货人姓名',
							icon: 'none'
						});
						return
					}
					if (!this.take.userPhone) {
						uni.showToast({
							title: '请输入发货人手机号',
							icon: 'none'
						});
						return
					}
				}
				if (Object.keys(this.close).length == 0) {
					uni.showToast({
						title: '请输入收货地址',
						icon: 'none'
					});
					return
				} else {
					if (!this.close.userName) {
						uni.showToast({
							title: '请输入收货人姓名',
							icon: 'none'
						});
						return
					}
					if (!this.close.userPhone) {
						uni.showToast({
							title: '请输入收货人手机号',
							icon: 'none'
						});
						return
					}
				}
				let totalprice = Number(this.price).toFixed(2)

				let data = {
					indentType: 0, //订单类型，0：通用红包
					indentBasicsMoney: totalprice
				}
				this.$Request.postJson('/app/indent/findRedPacket', data).then(res => {
					// console.log(res)
					if (res.code === 0) {
						this.hongbao = res.data
						this.showmoney = true
					}
				});

			},

			closemoney(index) {
				console.log(index)
				if (index == 1) {
					this.showmoney = !this.showmoney
				}
				if (index == 2) {
					this.onshowwp = !this.onshowwp;
					// this.jiazhiMoney = 0;
					// this.baojia = 0;
					// this.form.price = Number(this.form.price) - Number(this.baojiamoney)
					// this.baojiamoney = 0;
				}
			},

			// 判断红包使用id
			bindhongindex(id, money) {
				this.redPacketId = id
				this.form.hongbao = money
				this.showmoney = false
				this.checkMoney();
			},

			checkMoney() {
				let totalprice = (Number(this.price) - Number(this.form.hongbao)).toFixed(2)
				if (totalprice >= 0) {
					this.totalprice = totalprice;
				} else {
					this.totalprice = 0.00;
					this.price = 0.00;
				}
			},

			PickerChange(e) {
				this.typeIndex = e.detail.value
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},

			// 跳转发货地址
			bindtake(e) {
				uni.navigateTo({
					url: '/pages/takeaddress/takeaddress?addressType=' + e
				})
			},



			handleConfirm(e) {
				console.log('选中值:', e.value[0]);
				this.showPicker = false;
			},
			handleCancel() {
				this.showPicker = false;
			},

			selectWay: function(item) {
				this.openWay = item.id;
			},
			//下单
			placeOrder() {
				if (Object.keys(this.take).length == 0) {
					uni.showToast({
						title: '请输入发货地址',
						icon: 'none'
					});
					return
				} else {
					if (!this.take.userName) {
						uni.showToast({
							title: '请输入发货人姓名',
							icon: 'none'
						});
						return
					}
					if (!this.take.userPhone) {
						uni.showToast({
							title: '请输入发货人手机号',
							icon: 'none'
						});
						return
					}
				}
				if (Object.keys(this.close).length == 0) {
					uni.showToast({
						title: '请输入收货地址',
						icon: 'none'
					});
					return
				} else {
					if (!this.close.userName) {
						uni.showToast({
							title: '请输入收货人姓名',
							icon: 'none'
						});
						return
					}
					if (!this.close.userPhone) {
						uni.showToast({
							title: '请输入收货人手机号',
							icon: 'none'
						});
						return
					}
				}

				uni.showLoading({
					title: '下单中...',
					mask: false
				});


				this.$nextTick(() => {

					let data = {
						//发货
						"shipper": this.take.userName,
						"shipperAddress": this.take.addressDetail,
						"shipperAddressLat": this.take.addressLatitude,
						"shipperAddressLng": this.take.addressLongitude,
						"shipperPhone": this.take.userPhone,

						//收货
						"receiver": this.close.userName,
						"receiverAddress": this.close.addressDetail,
						"receiverLat": this.close.addressLatitude,
						"receiverLng": this.close.addressLongitude,
						"receiverPhone": this.close.userPhone,

						"orderType": this.typeIndex + 1,
						// "orderType": 2, //放快递柜
						"item": this.typeItem,
						"redPacketId": this.redPacketId
					}




					this.$Request.postJson('/app/logisticsOrder/saveOrder', data).then(res => {
						if (res.code == 0) {
							this.orders = res.data
							this.$nextTick(() => {
								this.showpay = true
								this.num = 2
								uni.hideLoading();
							})
						} else {
							uni.showToast({
								title: '发货地与收货地距离过近，无法下单！',
								icon: 'none',
								duration: 2000
							});
						}
					});
				})

			},



			wxPayJsApiLogisticsOrder() {
				//微信支付
				if (this.openWay == 1) {
					this.$Request.postT('/app/wxPay/wxPayJsApiLogisticsOrder', {
						orderNumber: this.orders.orderNumber
					}).then(res => {
						if (res.code == 0) {
							this.payList = res.data
							this.getPayment(this.payList, this.orders)
						}
					});

				} else if (this.openWay == 2) { //零钱支付
					this.$Request.postT('/app/userMoney/moneyPayLogisticsOrder', {
						orderNumber: this.orders.orderNumber
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/order/pay/pay?indentNumber=' + this.orders
										.orderNumber +
										'&id=' + this.orders.id + '&type=1'
								})
							}, 1000)
						}
					});
				}
			},



			//拉起付款确认页面
			getPayment(packageData, orderData) {
				wx.requestPayment({
					// "appId": this.payList.appId, //公众号ID，由商户传入
					"timeStamp": packageData.timeStamp, //时间戳，自1970年以来的秒数
					"nonceStr": packageData.nonceStr, //随机串
					"package": packageData.package,
					"signType": "RSA", //微信签名方式：
					"paySign": packageData.paySign, //微信签名 
					"success": function(res) {
						// console.log(res)
					},
					"fail": function(res) {
						console.log(res);
					},
					"complete": function(res) {
						console.log(orderData);
						uni.navigateTo({
							url: '/pages/order/pay/pay?indentNumber=' + orderData.orderNumber +
								'&id=' + orderData.id + '&type=1'
						})
					}
				})
			},


			//获取距离发货地址最近的快递柜位置
			getMinDistancePoint() {
				//获取快递柜列表
				this.$Request.getT('/app/point/list', {
					// type: 0,
					area: this.take.address
				}).then(it => {
					if (it.code == 0) {
						this.pointList = it.data
						this.$Request.postJson(
							`/app/point/getMinDistancePoint?lat=${this.take.addressLatitude}&lng=${this.take.addressLongitude}`,
							this.pointList).then(res => {
							if (res.code == 0) {
								this.minPoint = res.data

							}
						});
					}
				})
			},

			//根据距离计算物流订单价格
			getDistanceCountPrice() {
				this.$Request.getT('/app/logisticsOrder/getPriceByDistance', {
					distance: this.distance
				}).then(res => {
					if (res.code == 0) {
						this.price = res.data
					}
				});
			},



			// 查询地址
			getAddress(e) {
				let data = {
					addressId: e
				}
				this.$Request.getT('/app/indent/findAddressById', data).then(res => {
					if (res.code == 0) {
						if (this.addressType == 1) {
							this.take = res.data
							// this.getMinDistancePoint()
							this.addCenterMarker(this.take, '发货地', 0)
						} else if (this.addressType == 2) {
							this.close = res.data
							this.addCenterMarker(this.close, '收货地', 1)
						}
						if (Object.keys(this.take).length && Object.keys(this.close).length) {

							this.binddistance()
							this.calculateRoute()
						}
					}
				});
			},

			// 距离计算
			binddistance() {

				let ol = this.take.addressLatitude
				let od = this.take.addressLongitude
				let dl = this.close.addressLatitude
				let dd = this.close.addressLongitude
				this.$Request.postT('/app/indent/distance?ol=' + ol + '&od=' + od + '&dl=' + dl + '&dd=' + dd).then(
					res => {
						if (res.code === 0) {
							this.distance = res.data
							this.getDistanceCountPrice()
						}
					}
				);
			},


			// 计算两点间距离（米）
			calculateDistance(lat1, lng1, lat2, lng2) {
				const radLat1 = lat1 * Math.PI / 180.0;
				const radLat2 = lat2 * Math.PI / 180.0;
				const a = radLat1 - radLat2;
				const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS
				s = Math.round(s * 10000) / 10;
				return s;
			},





			// 计算路线
			calculateRoute() {
				// 清空旧路线
				this.polyline = [];

				// 调用路线规划API
				this.$nextTick(() => {
					const path = '/ws/direction/v1/driving';
					const params = {
						key: this.mapKey,
						from: `${this.take.addressLatitude},${this.take.addressLongitude}`,
						to: `${this.close.addressLatitude},${this.close.addressLongitude}`,
						waypoints: ``,
					};
					const sk = configData.SecretKey;
					const sig = generateSignatureGet(path, params, sk);
					params.sig = sig;
					const url = `https://apis.map.qq.com${path}?${this.encodeParams(params)}`;

					uni.request({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								// 修正数据路径（根据实际返回结构调整）
								this.handleRouteSuccess(res.data)
							}
						},
						fail: (err) => {
							console.log(err);
						}
					});
				})
			},

			encodeParams(params) {
				return Object.entries(params)
					.map(([key, value]) => {
						return `${key}=${encodeURIComponent(value)}`
					})
					.join('&')
			},


			// 路线规划成功回调
			handleRouteSuccess(res) {
				if (!res.result || !res.result.routes || res.result.routes.length === 0) {
					uni.showToast({
						title: '未找到可行路线',
						icon: 'none'
					});
					return;
				}

				const route = res.result.routes[0];
				const coors = route.polyline;
				const kr = 1000000; // 压缩系数

				// 坐标解压算法
				for (let i = 2; i < coors.length; i++) {
					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
				}

				// 生成路径点数组
				const points = [];
				for (let i = 0; i < coors.length; i += 2) {
					points.push({
						latitude: coors[i],
						longitude: coors[i + 1]
					});
				}

				// 保存路线点用于导航
				this.routePoints = points;

				// 更新路线数据
				this.polyline = [{
					points: points,
					color: '#367EEF',
					width: 6,
					borderWidth: 2,
					borderColor: '#5B98FD',
					arrowLine: true
				}];

				// 保存路线信息
				this.totalDistance = route.distance || 0;
				this.totalTime = route.duration || 0;
				// 自动调整视野
				this.mapContext.includePoints({
					points: points,
					padding: [40, 40, 40, 40]
				});

				// 更新距离和时间显示
				// this.updateRouteInfo();
			},



			// 获取用户当前位置
			getUserLocation() {
				// 创建地图上下文
				this.mapContext = uni.createMapContext('myMap', this);
				uni.getLocation({
					type: 'gcj02', // 腾讯地图使用国测局坐标系
					success: (res) => {
						this.centerLat = res.latitude;
						this.centerLng = res.longitude;
						// this.addCenterMarker(); // 添加中心图标
					},
					fail: (err) => {
						console.error('获取位置失败:', err);
					}
				});
			},
			// 添加中心图标
			addCenterMarker(data, title, type) {
				const addressList = {
					id: data.addressId,
					latitude: data.addressLatitude,
					longitude: data.addressLongitude,
					iconPath: '../../static/my/add.png', // 图标路径
					width: 28,
					height: 30,
					callout: {
						content: title,
						color: '#000',
						fontSize: 14,
						borderRadius: 6, // 圆角
						padding: 5,
						display: 'ALWAYS' // 气泡始终显示
					}
				}
				this.markers[type] = addressList
				if (this.markers.length == 1) {
					this.centerLat = data.addressLatitude;
					this.centerLng = data.addressLongitude;
				}
			},
			// 监听地图区域变化（实时获取中心点）
			onRegionChange(e) {
				const center = e.detail?.centerLocation || {};
				if (center.latitude && center.longitude) {
					this.centerLat = center.latitude;
					this.centerLng = center.longitude;
				}
				this.addCenterMarker();
			},
		},
	}
</script>

<style scoped lang="scss">
	.tabbar {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;

		/* #ifndef MP-WEIXIN */
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		/* #endif */
		z-index: 99;
	}

	.paytut {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #000;
		color: #fff;
		margin: 30upx;
		border-radius: 55upx;

	}

	.tabbarprice {
		/* flex: 1; */
		color: #fff;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 40upx;
	}

	.tabbarprice text {
		color: #fff;
		font-size: 38upx;
		font-weight: 500;
	}

	.tabbarbtn {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.buts {
			background: #FF7F00;
			width: 230upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			border-radius: 0upx 60upx 60upx 0upx;
			color: white;
			font-size: 27rpx;
		}
	}

	/* 红包弹框 */
	.popup_money {
		/* height: 400upx; */
		width: 100%;
		height: 630rpx;
		position: relative;
		background: #F2EDED;
		padding-bottom: 45rpx;
		/* #ifndef MP-WEIXIN */
		height: 680rpx;
		/* #endif */

	}

	.data_title {
		width: 92%;
		margin: 0 auto;
		font-size: 32rpx;
		line-height: 100upx;
		font-weight: bold;
		letter-spacing: 3upx;
		position: relative;
		top: 0upx;
		z-index: 99991;
	}

	.box_tit {
		width: 90%;
		margin: 0 auto;
		height: 80upx;
		display: flex;
	}

	.money_name {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 27rpx;
		font-weight: bold;
		letter-spacing: 2upx;
	}

	.money_box {
		width: 93%;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 14upx;
		height: 220rpx;
		margin-bottom: 50rpx;
	}

	.money_price {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 34upx;
		font-weight: bold;
		color: red;
	}

	.money_data {
		color: #999999;
		font-size: 24rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 8upx;
	}

	.uni-scroll-view,
	.uni-scroll-view-content {
		position: relative;
		width: 100%;
		height: 100%;
		background: #F2EDED;
	}

	.image_box {
		width: 40%;
		margin: 0 auto;
		margin-bottom: 110rpx;
	}

	.u-drawer-bottom {
		background-color: #FAF7F5 !important;
	}

	.u-line {
		width: 90% !important;
		border-bottom-width: 6upx !important;
		margin: 0 auto !important;
		margin-top: 22upx !important;
		margin-bottom: 22upx !important;
	}

	.box_bottom {
		width: 90%;
		margin: 0 auto;
		display: flex;
		height: 40upx;
	}

	.money_use {
		flex: 1;
		color: #999999;
		font-size: 24rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.lj_use {
		width: 150rpx;
		border: 2rpx solid #FF7F00;
		color: #FF7F00;
		text-align: center;
		line-height: 48rpx;
		border-radius: 40rpx;
		font-size: 23rpx;
	}


	.container {
		position: relative;
		max-height: 100vh;
		overflow: hidden;

		.map {
			width: 100%;
			height: 38vh;
		}

		.bor-cor {
			border-bottom: 4rpx solid #f37b1d;
			// border-top: 4rpx solid #f37b1d;
			// border-radius: 100rpx;
		}

		.sliderpanel {
			width: 100%;
			height: 65vh;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			z-index: 99;

		}
	}

	.one_box {
		width: 100%;
		/* height: 80upx; */
		/* background: #F5F5F5; */
		margin: 0 auto;
		border-radius: 12upx;
		display: flex;
		/* height: 100rpx; */
		align-items: center;
	}

	.box_dian {
		/* flex: 1; */
		width: 10%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.box_dian image {
		width: 45rpx;
		height: 45rpx;
	}

	.box_name {
		flex: 5;
		display: flex;
		justify-content: left;
		align-items: center;
		color: #333333;
		font-weight: 700;
	}

	.box_addres {
		/* flex: 5; */
		width: 80%;
		font-size: 32rpx;
		overflow: hidden;
	}

	.box_addres1 {
		/* flex: 5; */
		width: 80%;
		font-size: 28rpx;
		overflow: hidden;
	}

	.box_jh {
		margin-left: 19rpx;
		height: 30rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.box_jh image {
		width: 30upx;
		height: 30upx;
	}

	.contents {
		width: 100%;
		/* #ifdef MP-WEIXIN */
		margin-top: 25rpx;
		/* #endif */
		max-height: 50vh;
		overflow-y: auto;
	}

	.part_one {
		width: 95%;
		margin: 0 auto;
		/* height: 240upx; */
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 20upx;
		padding: 25rpx 10rpx;
	}

	/* 支付弹框 */
	.popup_pay {
		width: 100%;
	}

	.pay_btns {
		width: 90%;
		margin: 0 auto 40rpx;
		text-align: center;
		background: #FF7F00;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;
		margin-top: 20rpx;
	}

	.part_two {
		width: 95%;
		margin: 0 auto;
		/* height: 260rpx; */
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 20upx;
	}

	.xiadan_box_bottom {
		width: 100%;
		background-color: #ffffff;
		height: 12vh;
		border-top: 1rpx solid #e8e8e8;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		justify-content: center;
		align-items: center;

		button {
			width: 200rpx;
			height: 70rpx;
		}
	}
</style>